<template>
  <div class="goods_de_1">
    <div class="pop_img_box">
      <img :src="require('../assets/images/home_banner.png')" alt />
      <img class="pop_tag" :src="require('..//assets/images/tg_tb.png')" alt />
      <div class="zh_1" v-if="complate == 1">招标中</div>
      <div class="zh_1" v-if="isOrder == 3">已售罄</div>
    </div>
    <div class="infi_box">
      <div class="tit_box">
        <div>满天星</div>
        <div class="t_1" v-if="complate != 1">基地直供</div>
        <div class="tag_box noTop" v-if="complate == 1">
          <span>A级</span>
        </div>
      </div>
      <div class="tag_box">
        <span>A级</span>
      </div>
      <div class="er_q" v-if="!isOrder && complate != 1 && !isChart">
        二度开放
        <van-icon name="arrow-down" />
      </div>
      <div>
        <div class="tag_box" v-if="isOrder">
          <span v-if="isOrder != 3">二度开放</span>
          <span class="f_1">市场均价:￥10.0/束</span>
          <div :class="isOrder == 3 ? 'isTop_1' : ''">采购数量：10束</div>
        </div>
      </div>
      <div class="pic_1" v-if="complate != 1 && !isChart">
        <div class="p_1">
          <span>￥</span>5.5
          <span v-if="isOrder == 2">/束</span>
        </div>
        <div class="tui_k" v-if="isOrder == 2">申请退款</div>
        <van-stepper
          v-if="!isOrder"
          class="steper"
          v-model="value"
          input-width="25px"
          button-size="25px"
        />
      </div>
      <div v-if="complate == 1" class="flex">
        <div class="f_1 top_20">预期价格:￥10.0/束</div>
        <div class="f_2 top_20">采购数量：685束</div>
      </div>
      <div class="f_2 top_20" v-if="complate == 1">结束时间：2020年10月23日 17:223</div>
      <div class="f_2 top_20" v-if="complate == 1">发货时间：2020年10月23日 17:223</div>
      <div class="flex top_20" v-if="complate == 1">
        <div></div>
        <div class="ntm_box">
          <div class="cancel">放弃招标</div>
          <div class="buy" @click="$router.push('/competeManageDetail')">查看报价</div>
        </div>
      </div>
      <!-- 统计图 -->
      <div class="top_20">
        <div class="flex">
          <div class="ye_g">·最高点：￥10.1</div>
          <div class="ye_d">·最低点：￥1.1</div>
        </div>
        <div class="flex1">
          <div id="main" class="each"></div>
          <div class="ic_i_po">
            <!-- die.png bubian.png -->
            <img :src="require('./../assets/images/zhang.png')" alt />
            <div>价格</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "goods-card",
  props: ["isOrder", "complate", "isChart"],
  mounted() {
    if (this.isChart == 1) {
      setTimeout(() => {
        this.drawLine();
      }, 10);
    }
  },

  methods: {
    drawLine() {
      const myChart = this.$echarts.init(document.getElementById(`main`));
      console.log("111")
      myChart.setOption({
        xAxis: {
          type: "category",
          // data: ["001", "002", "003", "004", "005", "006"],
          splitLine: { show: false },
          axisLine: { show: false },
          axisTick: { show: false }
        },
        yAxis: {
          show: true,
          type: "value",
          splitLine: { show: false }, //去除网格线
          nameTextStyle: {
            color: "#abb8ce"
          },
          axisLabel: {
            color: "#abb8ce"
          },
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            //y轴
            show: false
          }
        },
        series: [
          {
            data: [1, 2, 1, 2, 1, 2, 1],
            type: "line",
            symbolSize: 5,
            smooth: true,
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(0,198,87,0.6)"
                  },
                  {
                    offset: 1,
                    color: "rgba(0,198,87,0.2)"
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                color: "#00C657",
                lineStyle: {
                  color: "rgba(0,198,87,0.6)"
                }
              }
            }
          }
        ],
        grid: {
          top: "10px",

          left: "0px",

          right: "0px",

          bottom: "0px",

          backgroundColor: "#fff",

          width: "100%", //图例宽度

          height: "50%" //图例高度
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.flex1 {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.each {
  width: 70%;
  height: 59px;
}
.ic_i_po {
  position: relative;
  width: m-w(90);
  margin-left: m-w(17);
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  div {
    font-size: m-w(20);
    font-family: PingFang SC;
    font-weight: 500;
    z-index: 1;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 3px;
  }
}
.ye_d {
  font-size: m-w(20);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(0, 198, 87, 1);
}
.ye_g {
  font-size: m-w(20);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(255, 98, 0, 1);
}
.isTop_1 {
  margin-top: 5px;
  margin-left: 0 !important;
}
.ntm_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.cancel {
  margin-right: m-w(31);
  width: m-w(161);
  height: 33px;
  background: rgba(255, 98, 0, 1);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
}
.buy {
  width: m-w(161);
  height: 33px;
  background: rgba(0, 198, 88, 1);
  border-radius: 5px;
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.top_20 {
  margin-top: 9px;
}
.f_2 {
  font-size: m-w(20);
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(169, 174, 192, 1);
}
.f_1 {
  background: #fff0e6 !important;
  padding: 3px;
  font-size: m-w(20);
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(255, 98, 0, 1);
}
.noTop {
  margin-top: 0 !important;
  margin-left: m-w(25);
}
.zh_1 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 59px;
  height: 59px;
  background: rgba(0, 0, 0, 0.6);
  font-size: m-w(24);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  border-radius: 509px;
}
.tui_k {
  width: m-w(201);
  height: 33px;
  background: rgba(169, 174, 192, 1);
  border-radius: 5px;
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.goods-card {
  margin: 0;
}

.delete-button {
  height: 100%;
}
.header_box {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  padding: 16px 0;
  background: white;
  @extend .flex;
  font-size: m-w(36);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  .am {
    font-size: m-w(30);
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(169, 174, 192, 1);
    margin-right: m-w(27);
  }
  .wi {
    width: 30px;
  }
}
.hei {
  height: 57px;
}
.cart_box {
  min-height: 100%;
  background: #f7f9fc;
}
.shop_cart_box {
  width: 100%;
  .shop_cart_contant {
    padding: 10px;
  }
}
.shop_box {
  background: rgba(255, 255, 255, 1);
  border-radius: m-w(10);
  padding: 15px m-w(20);
}
.check_box {
  display: flex;
  align-items: center;
  i {
    color: #a9aec0;
  }
}
.c_1 {
  font-size: m-w(28);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  margin-left: m-w(19);
}
.c_2 {
  width: m-w(92);
  height: 15px;
  border: 1px solid rgba(255, 98, 0, 1);
  border-radius: 5px 0px 5px 0px;
  font-size: m-w(20);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(255, 98, 0, 1);
  margin-left: m-w(22);
  margin-right: m-w(10);
}
.goods_detai_box {
  margin-top: 24px;
}
.pop_img_box {
  width: m-w(260);
  height: 130px;
  border-radius: 5px;
  position: relative;
  img {
    height: 100%;
    width: 100%;
    border-radius: 5px;
  }
  .pop_tag {
    width: m-w(94);
    height: 16px;
    position: absolute;
    left: 0;
    top: 7px;
  }
}

.goods_de_1 {
  display: flex;
  flex: 1;
}
.tit_box {
  display: flex;
  align-items: center;
  font-size: m-w(28);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.t_1 {
  @extend .c_2;
  color: #00c657;
  width: m-w(105);
  border-color: #00c657;
}
.infi_box {
  margin-left: m-w(20);
  flex: 1;
}
.tag_box {
  margin-top: 5px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-family: PingFang SC;
  font-weight: 300;
  color: #a9aec0;
  border-radius: 2px;
  font-size: m-w(20);
  div {
    margin-left: m-w(69);
  }
  span {
    margin-top: 5px;
    padding: 2px 8px;
    background: #f7f9fc;

    margin-right: m-w(18);
  }
}
.er_q {
  width: 66px;
  margin-top: 10px;
  background: #fff0e6;
  padding: 3px m-w(3);
  font-size: m-w(20);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(255, 98, 0, 1);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}
.pic_1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  .p_1 {
    font-size: m-w(36);
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(255, 98, 0, 1);
    span {
      font-size: m-w(20);
      font-family: PingFang SC;
      font-weight: bold;
      color: rgba(255, 98, 0, 1);
    }
  }
}
.g_1 {
  display: flex;
  align-items: center;
}
.g_2 {
  margin-right: 10px;
}
.steper {
  button,
  input {
    background: white;
    border-top: 1px solid #eeeef8;
    border-bottom: 1px solid #eeeef8;
  }
  button {
    border: 1px solid #eeeef8;
  }
}
.bott_cout {
  @extend .flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  padding: 18px 0;
  .check_1 {
    margin-left: m-w(25);
  }
  .b_c_1 {
    display: flex;
    align-items: center;
  }
  .b_c_2 {
    font-size: m-w(28);
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(255, 98, 0, 1);
    margin-right: m-w(35);
    span {
      color: #333333;
    }
  }
}
.buy {
  width: m-w(174);
  height: 33px;
  background: rgba(0, 198, 87, 1);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  margin-right: m-w(20);
}
.hei2 {
  height: 70px;
}
</style>
